<template>
  <!-- 更新入会资料 - 申请信息 -->
  <view class="application-info">
    <view class="info-details">
      <view class="info-details__item">
        <view class="info-details__item--label">会员类型</view>
        <view class="info-details__item--content">{{ getApplyType }}</view>
      </view>
      <view class="info-details__item">
        <view class="info-details__item--label">服务专员</view>
        <view class="info-details__item--content">{{ info?.attacheName }}</view>
      </view>
      <view class="info-details__item">
        <view class="info-details__item--label">入会时间</view>
        <view class="info-details__item--content">{{ formatToDate(info?.joinTime) }}</view>
      </view>
      <view class="info-details__item">
        <view class="info-details__item--label">到期时间</view>
        <view class="info-details__item--content">{{ formatToDate(info?.memberEndTime) }}</view>
      </view>
      <view class="info-details__item" style="width: 100%; flex: none">
        <view class="info-details__item--label">负责人标签</view>
        <view class="info-details__item--content">
          <template v-for="(v, i) in info?.groupNames" :key="i">
            <text class="content-tag">{{ v }}</text>
          </template>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { computed, type PropType } from 'vue';
  import dictionary from '@/utils/dictionary';
  import { formatToDate } from '@/utils/dateUtil';
  import { type AdminMemberInfoResult } from '@/api/admin/types';

  const props = defineProps({
    info: Object as PropType<AdminMemberInfoResult>,
  });

  const getApplyType = computed(() => {
    const typeList = dictionary.getLocal('memberType');
    const content = typeList.find((v) => v.dictValue === props.info?.applyType)?.dictLabel;
    return content;
  });
</script>

<style lang="scss" scoped>
  .application-info {
    background-color: #fff;
    padding: 0 30rpx;
    padding-top: 30rpx;
  }
  .info-details {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    &__item {
      flex: 1;
      display: flex;
      align-items: center;
      font-size: 28rpx;
      padding-bottom: 20rpx;
      &--label {
        color: #000;
        white-space: nowrap;
        margin-right: 30rpx;
      }
      &--content {
        color: #606266;
        white-space: nowrap;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .content-tag {
          line-height: 28rpx;
          font-size: 24rpx;
          font-weight: 200;
          padding: 8rpx 14rpx;
          background-color: #e9e3b5;
          border-color: #e9e3b5;
          color: #666;
          border-radius: 6rpx;
          margin-right: 12rpx;
          margin-bottom: 12rpx;
        }
      }
    }
  }
</style>
